<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="wb/css/mui.min.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>订单详情页</title>
	<style>
		body{
			background: rgb(229,229,229);
		}
		.mylistbox{
			margin-top: 0;
		}
		.swal-title:not(:last-child){
			font-size: 2rem;
		}
		.swal-footer{
			text-align: center;
		}

	</style>
</head>
<body>
	<div class="lists-header" style="position: relative;z-index: 100;width: 100%;padding: 0 5px;">
		<div class="mylists" style="border-bottom: 1px solid black;">
			<div class="payinfo-header mylists-header">
				<div class="headerimg">
					<img src="images/head.jpg" alt="">
				</div>
				<div class="payheader-words mylists-words">
					<p class="info-ke">李老师 高中数学 <span>课次：10次</span></p>
					<p class="info-teacher mylists-phone"><i class="glyphicon glyphicon-earphone"></i>15888888888 <span class="mylists-money">￥300/小时、2小时/课时</span></p>
				</div>
			</div>
			<p class="mylists-edit-toggle">总金额：6000元<span>已支付</span></p>
			<p class="mylists-edit-toggle">联系人姓名：张小宝<span class="mylists-name">电话：15888888888</span></p>
			<p class="mylists-edit-toggle">下单时间：2017-12-30 15:33:26</p>
			<p class="mylists-edit-toggle">订单编号：6225522542</p>
			<p class="mylists-edit-toggle noborder-bom">上课地址：北京牛津堂大学府</p>
		</div>
	</div>
	

	<div class="container">
		<div class="mylistbox">
			
			<div class="mylists-box" id="mylistsbox">
				<div class="mui-scroll" id="mui-scroll" style="position: relative;">
					<!-- <div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">已完成</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p>
								<p class="mylists-edit-sure">确认时间：2017-08-09 15:55</p>
							</div>
							<div class="mylists-sure-right">
								<p>家长已确认</p>
							</div>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">课程结束</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p>
							</div>
							<div class="mylists-sure-right">
								<button class="listSure">确认完成</button>
							</div>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">未开始</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-right">
								<button class="listCancle">取消</button>
							</div>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">课程结束</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p>
							</div>
							<div class="mylists-sure-right">
								<button class="listSure">确认完成</button>
							</div>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">未开始</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-right">
								<button class="listCancle">取消</button>
							</div>
						</div>
					</div> -->
				</div>
			</div>
				
			
		</div>
	</div>


</body>
<script src="js/sweetalert.min.js"></script>
<script src="wb/js/mui.min.js"></script>
<script src="js/jquery.js"></script>
<script>
	$(function(){

		document.getElementById('mylistsbox').style.height = window.screen.availHeight -250+'px';
	
		pulluptoRefresmui();

	})

	function pulluptoRefresmui() {
		//加载下一个页面
		mui.init({
			pullRefresh: {
				container: '#mylistsbox',
				up: {
					height: 50, // 可选.默认50.触发上拉加载拖动距离
					callback: pullupRefresh,
					contentrefresh: '正在刷新...',
					auto: true
				}
			}
		});
		//上拉加载回调方法
		function pullupRefresh() {
	//		if(pageNo > totalpage) {
	//			mui.toast('没有更多数据了！');
	//		}
			setTimeout(function() {
				mui('#mylistsbox').pullRefresh().endPullupToRefresh();
	//			if(totalpage >= pageNo) {
					method();
	//			}
			}, 200);
		}
	}
	function method(){
		var str = '<div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">已完成</span></p><div class="mylists-sure"><div class="mylists-sure-left"><p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p><p class="mylists-edit-sure">确认时间：2017-08-09 15:55</p></div><div class="mylists-sure-right"><p>家长已确认</p></div></div></div><div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">课程结束</span></p><div class="mylists-sure"><div class="mylists-sure-left"><p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p></div><div class="mylists-sure-right"><button class="listSure">确认完成</button></div></div></div><div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">未开始</span></p><div class="mylists-sure"><div class="mylists-sure-right"><button class="listCancle">取消</button></div></div></div>';


		$('.mui-scroll').append(str);
		mybutton();

	}





		/*取消内容*/
		var cancleStr = '<div class="mylists-sure-left"><p class="mylists-edit-sure">取消时间：2017-08-09 15:55</p></div><div class="mylists-sure-right"><p style="display:block;line-height:25px;">家长已取消</p></div>';
		/*确认内容*/
		var sureStr = '<div class="mylists-sure-left"><p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p><p class="mylists-edit-sure">确认时间：2017-08-09 15:55</p></div><div class="mylists-sure-right"><p>家长已确认</p></div>';

function mybutton(){
		$(".listCancle").click(function() { 
			var thiscancle = $(this);
		 	swal({
			  title: "是否取消本次课程?",
			  icon: "warning",
			  buttons: true,
			  dangerMode: true,
			  buttons: ["取消", "确定"],
			})
			.then((willDelete) => {
			  if (willDelete) {
			  	thiscancle.closest('.mylists').find('.mylists-server-ing').html('已取消');
		        thiscancle.closest('.mylists-sure').html(cancleStr);
			    swal("课程取消成功!", {
			      icon: "success",
			    });
			  } else {
			    
			  }
			});
		});


		$(".listSure").click(function() { 
			var thissure = $(this);
		    swal({
			  title: "是否确认已上本课?",
			  icon: "warning",
			  buttons: true,
			  dangerMode: true,
			  buttons: ["取消", "确定"],
			})
			.then((willDelete) => {
			  if (willDelete) {
			  	thissure.closest('.mylists').find('.mylists-server-ing').html('已结束');
		        thissure.closest('.mylists-sure').html(sureStr);
			    swal("课程取消成功!", {
			      icon: "success",
			    });
			  } else {
			    
			  }
			});
		});
}
</script>
</html>